extends ../_layout

block active
  - sidebar_active = 'form-extended.html'

block content
  h3 Form Extended
    small New elements to extend the classic functions
  // START panel
  .panel.panel-default
      .panel-heading  Form elements
      .panel-body
        form.form-horizontal(method='get', action="#")

          fieldset
            legend New Components
            .form-group
              label.col-sm-2.control-label
                | Slider
                br
                small Classic, range and vertical
              .col-sm-4
                input.slider.slider-vertical(data-ui-slider="", type='text', value='', data-slider-min='5', data-slider-max='35', data-slider-step='1', data-slider-value='5', data-slider-orientation='vertical')
                input.slider.slider-vertical(data-ui-slider="", type='text', value='', data-slider-min='5', data-slider-max='35', data-slider-step='1', data-slider-value='10', data-slider-orientation='vertical')
                input.slider.slider-vertical(data-ui-slider="", type='text', value='', data-slider-min='5', data-slider-max='35', data-slider-step='1', data-slider-value='15', data-slider-orientation='vertical')
                input.slider.slider-vertical(data-ui-slider="", type='text', value='', data-slider-min='5', data-slider-max='35', data-slider-step='1', data-slider-value='20', data-slider-orientation='vertical')
                input.slider.slider-vertical(data-ui-slider="", type='text', value='', data-slider-min='5', data-slider-max='35', data-slider-step='1', data-slider-value='25', data-slider-orientation='vertical')
                input.slider.slider-vertical(data-ui-slider="", type='text', value='', data-slider-min='5', data-slider-max='35', data-slider-step='1', data-slider-value='30', data-slider-orientation='vertical')
                br
                br
                input.slider.slider-horizontal(data-ui-slider="", type='text', value='', data-slider-min='5', data-slider-max='20', data-slider-step='1', data-slider-value='10', data-slider-orientation='horizontal')
                br
                br
                input#sl2.slider(data-ui-slider="", type='text', value='', data-slider-min='10', data-slider-max='1000', data-slider-step='5', data-slider-value='[250,750]')

          fieldset
            .form-group
              label.col-sm-2.control-label Switch Small
              .col-sm-10
                label.switch.switch-sm
                  input(type='checkbox', checked="checked")
                  span
            .form-group
              label.col-sm-2.control-label Switch
              .col-sm-10
                label.switch
                  input(type='checkbox', checked="checked")
                  span
            .form-group
              label.col-sm-2.control-label Switch Large
              .col-sm-10
                label.switch.switch-lg
                  input(type='checkbox', checked="checked")
                  span
            .form-group
              label.col-sm-2.control-label Switch Radio
              .col-sm-10
                label.switch.switch-lg
                  input(type='radio', checked="checked", name="radioSwitch")
                  span
                label.switch.switch-lg
                  input(type='radio', name="radioSwitch")
                  span
          fieldset
            .form-group.mb
              label.col-sm-2.control-label Color picker
              .col-sm-8
                .row
                  .col-xs-12
                    p Automatically switches from hex to rgba format when transparency is selected:
                    input.form-control.demo-colorpicker(type='text', value='#5367ce')
                  .col-xs-12
                    p.mt-lg As a component:
                    .input-group.colorpicker-component.demo-colorpicker
                      input.form-control(type='text', value='#00AABB')
                      span.input-group-addon
                        i
                  .col-xs-12
                    p.mt-lg Inline mode:
                    .row
                      .col-xs-6
                        #demo_cont.demo-colorpicker(data-container='#demo_cont', data-color='rgba(150,216,62,0.55)', data-inline='true')
                      .col-xs-6
                        .demo-colorpicker(data-container='true', data-color='rgb(50,216,62)', data-inline='true')
                  .col-xs-12
                    p.mt-lg Quick select Bootstrap colors:
                    input#demo_selectors.form-control(type='text', data-format='hex', value='success')
          fieldset
            .form-group.mb
              label.col-sm-2.control-label Chosen Groups
              .col-sm-10
                select.chosen-select.input-md.form-control
                  //- option(value='')
                  optgroup(label='NFC EAST')
                    option Dallas Cowboys
                    option New York Giants
                    option Philadelphia Eagles
                    option Washington Redskins
                  optgroup(label='NFC NORTH')
                    option Chicago Bears
                    option Detroit Lions
                    option Green Bay Packers
                    option Minnesota Vikings
                  optgroup(label='NFC SOUTH')
                    option Atlanta Falcons
                    option Carolina Panthers
                    option New Orleans Saints
                    option Tampa Bay Buccaneers
                  optgroup(label='NFC WEST')
                    option Arizona Cardinals
                    option St. Louis Rams
                    option San Francisco 49ers
                    option Seattle Seahawks
                  optgroup(label='AFC EAST')
                    option Buffalo Bills
                    option Miami Dolphins
                    option New England Patriots
                    option New York Jets
                  optgroup(label='AFC NORTH')
                    option Baltimore Ravens
                    option Cincinnati Bengals
                    option Cleveland Browns
                    option Pittsburgh Steelers
                  optgroup(label='AFC SOUTH')
                    option Houston Texans
                    option Indianapolis Colts
                    option Jacksonville Jaguars
                    option Tennessee Titans
                  optgroup(label='AFC WEST')
                    option Denver Broncos
                    option Kansas City Chiefs
                    option Oakland Raiders
                    option San Diego Chargers

            .form-group
              label.col-sm-2.control-label Chosen Multiple
              .col-sm-10
                select.chosen-select.form-control(multiple)
                  //- option(value='')
                  option Dallas Cowboys
                  option New York Giants
                  option Philadelphia Eagles
                  option Washington Redskins
                  option Chicago Bears
                  option Detroit Lions
                  option Green Bay Packers
                  option Minnesota Vikings
                  option Atlanta Falcons
                  option Carolina Panthers
                  option New Orleans Saints
                  option Tampa Bay Buccaneers
                  option Arizona Cardinals
                  option St. Louis Rams
                  option San Francisco 49ers
                  option Seattle Seahawks
                  option Buffalo Bills
                  option Miami Dolphins
                  option New England Patriots
                  option New York Jets
                  option Baltimore Ravens
                  option Cincinnati Bengals
                  option Cleveland Browns
                  option Pittsburgh Steelers
                  option Houston Texans
                  option Indianapolis Colts
                  option Jacksonville Jaguars
                  option Tennessee Titans
                  option Denver Broncos
                  option Kansas City Chiefs
                  option Oakland Raiders
                  option San Diego Chargers
          fieldset
            .form-group
              label.col-sm-2.control-label Masked input
              .col-sm-10
                .row
                  .col-sm-6
                    input.form-control(type='text', data-masked="", data-inputmask="'mask': '999-99-999-9999-9'", placeholder="ISBN")
                    span.help-block data-inputmask="'mask': '999-99-999-9999-9"'
                  .col-sm-6
                    input.form-control(type='text', data-masked="", data-inputmask="'mask': '99/99/9999'", placeholder="Date")
                    span.help-block data-inputmask="'mask': '99/99/9999"'
                  .col-sm-6
                    input.form-control(type='text', data-masked="", data-inputmask="'mask': '(999) 999-9999'", placeholder="Phone number")
                    span.help-block data-inputmask="'mask': '(999) 999-9999"'
                  .col-sm-6
                    input.form-control(type='text', data-masked="", data-inputmask="'mask': 'aaaa-9999-aa99-9999'", placeholder="Custom Key")
                    span.help-block data-inputmask="'mask': 'aaaa-9999-aa99-9999"'
                  .col-sm-6
                    input.form-control(type='text', data-masked="", data-inputmask="'mask': '$ 999.999.999,99'", placeholder="Currency Dolar")
                    span.help-block data-inputmask="'mask': '$ 999.999.999,99"'
                  .col-sm-6
                    input.form-control(type='text', data-masked="", data-inputmask="'mask': '€ 999.999.999,99'", placeholder="Currency Euro")
                    span.help-block data-inputmask="'mask': '€ 999.999.999,99"'

          fieldset
            .form-group.mb
              label.col-sm-2.control-label.mb Select2
              .col-sm-10
                // SELECT2
                select#select2-1.form-control
                    option(value='AL') Alabama
                    option(value='AR') Arkansas
                    option(value='IL') Illinois
                    option(value='IA') Iowa
                    option(value='KS') Kansas
                    option(value='KY') Kentucky
                    option(value='LA') Louisiana
                    option(value='MN') Minnesota
                    option(value='MS') Mississippi
                    option(value='MO') Missouri
                    option(value='OK') Oklahoma
                    option(value='SD') South Dakota
                    option(value='TX') Texas
                    option(value='TN') Tennessee
                    option(value='WI') Wisconsin
                p.mv Multiple
                select#select2-2.form-control
                    optgroup(label='Alaskan/Hawaiian Time Zone')
                      option(value='AK') Alaska
                      option(value='HI') Hawaii
                    optgroup(label='Pacific Time Zone')
                      option(value='CA') California
                      option(value='NV') Nevada
                      option(value='OR') Oregon
                      option(value='WA') Washington
                    optgroup(label='Mountain Time Zone')
                      option(value='AZ') Arizona
                      option(value='CO') Colorado
                      option(value='ID') Idaho
                      option(value='MT') Montana
                      option(value='NE') Nebraska
                      option(value='NM') New Mexico
                      option(value='ND') North Dakota
                      option(value='UT') Utah
                      option(value='WY') Wyoming
                    optgroup(label='Central Time Zone')
                      option(value='AL') Alabama
                      option(value='AR') Arkansas
                      option(value='IL') Illinois
                      option(value='IA') Iowa
                      option(value='KS') Kansas
                      option(value='KY') Kentucky
                      option(value='LA') Louisiana
                      option(value='MN') Minnesota
                      option(value='MS') Mississippi
                      option(value='MO') Missouri
                      option(value='OK') Oklahoma
                      option(value='SD') South Dakota
                      option(value='TX') Texas
                      option(value='TN') Tennessee
                      option(value='WI') Wisconsin
                    optgroup(label='Eastern Time Zone')
                      option(value='CT') Connecticut
                      option(value='DE') Delaware
                      option(value='FL') Florida
                      option(value='GA') Georgia
                      option(value='IN') Indiana
                      option(value='ME') Maine
                      option(value='MD') Maryland
                      option(value='MA') Massachusetts
                      option(value='MI') Michigan
                      option(value='NH') New Hampshire
                      option(value='NJ') New Jersey
                      option(value='NY') New York
                      option(value='NC') North Carolina
                      option(value='OH') Ohio
                      option(value='PA') Pennsylvania
                      option(value='RI') Rhode Island
                      option(value='SC') South Carolina
                      option(value='VT') Vermont
                      option(value='VA') Virginia
                      option(value='WV') West Virginia
                p.mv Multiple Pills
                select#select2-3.form-control(multiple='multiple')
                    optgroup(label='Alaskan/Hawaiian Time Zone')
                      option(value='AK', selected="selected") Alaska
                      option(value='HI') Hawaii
                    optgroup(label='Pacific Time Zone')
                      option(value='CA') California
                      option(value='NV') Nevada
                      option(value='OR') Oregon
                      option(value='WA') Washington
                    optgroup(label='Mountain Time Zone')
                      option(value='AZ') Arizona
                      option(value='CO') Colorado
                      option(value='ID') Idaho
                      option(value='MT') Montana
                      option(value='NE') Nebraska
                      option(value='NM') New Mexico
                      option(value='ND') North Dakota
                      option(value='UT') Utah
                      option(value='WY') Wyoming
                    optgroup(label='Central Time Zone')
                      option(value='AL') Alabama
                      option(value='AR') Arkansas
                      option(value='IL') Illinois
                      option(value='IA') Iowa
                      option(value='KS') Kansas
                      option(value='KY') Kentucky
                      option(value='LA') Louisiana
                      option(value='MN') Minnesota
                      option(value='MS') Mississippi
                      option(value='MO') Missouri
                      option(value='OK') Oklahoma
                      option(value='SD') South Dakota
                      option(value='TX') Texas
                      option(value='TN') Tennessee
                      option(value='WI') Wisconsin
                    optgroup(label='Eastern Time Zone')
                      option(value='CT') Connecticut
                      option(value='DE') Delaware
                      option(value='FL') Florida
                      option(value='GA') Georgia
                      option(value='IN') Indiana
                      option(value='ME') Maine
                      option(value='MD') Maryland
                      option(value='MA') Massachusetts
                      option(value='MI') Michigan
                      option(value='NH') New Hampshire
                      option(value='NJ') New Jersey
                      option(value='NY') New York
                      option(value='NC') North Carolina
                      option(value='OH') Ohio
                      option(value='PA') Pennsylvania
                      option(value='RI') Rhode Island
                      option(value='SC') South Carolina
                      option(value='VT') Vermont
                      option(value='VA') Virginia
                      option(value='WV') West Virginia
                p.mv Placeholders
                select#select2-4.form-control
                    optgroup(label='Alaskan/Hawaiian Time Zone')
                      option(value='AK') Alaska
                      option(value='HI') Hawaii
                    optgroup(label='Pacific Time Zone')
                      option(value='CA') California
                      option(value='NV') Nevada
                      option(value='OR') Oregon
                      option(value='WA') Washington
                    optgroup(label='Mountain Time Zone')
                      option(value='AZ') Arizona
                      option(value='CO') Colorado
                      option(value='ID') Idaho
                      option(value='MT') Montana
                      option(value='NE') Nebraska
                      option(value='NM') New Mexico
                      option(value='ND') North Dakota
                      option(value='UT') Utah
                      option(value='WY') Wyoming
                // END SELECT2
          fieldset
            .form-group.mb
              label.col-sm-2.control-label.mb DateTimePicker
              .col-sm-10
                #datetimepicker1.input-group.date
                  input.form-control(type='text')
                  span.input-group-addon
                    span.fa.fa-calendar
            .form-group.mb
              label.col-sm-2.control-label.mb Time Picker
              .col-sm-10
                #datetimepicker2.input-group.date
                  input.form-control(type='text')
                  span.input-group-addon
                    span.fa.fa-clock-o
          fieldset
            .form-group
              label.col-sm-2.control-label Tags input
                span.text-sm.text-muted Type and press Enter
              .col-sm-10
                input.form-control(type='text',data-role="tagsinput", value="Amsterdam,Washington,Sydney,Beijing,Cairo")

          fieldset
            .form-group
              label.col-sm-2.control-label File input
              .col-sm-10
                input.form-control.filestyle(type='file', data-classbutton='btn btn-default', data-classinput="form-control inline")
          fieldset
            .form-group
              label.col-sm-2.control-label Block Note Editor
              .col-sm-10
                .panel
                  .panel-body
                    textarea.form-control.note-editor(rows="10")
                p With margin
                .panel
                  .panel-body
                    textarea.form-control.note-editor.note-editor-margin(rows="10")
          fieldset
            .form-group
              label.col-sm-2.control-label Simple wysiwyg
              .col-sm-10
                .btn-toolbar.btn-editor(data-role='editor-toolbar', data-target='#editor')
                  .btn-group.dropdown
                    a.btn.btn-default(data-toggle='dropdown', title='Font')
                      em.fa.fa-font
                      b.caret
                    ul.dropdown-menu
                      li
                        a(href='', data-edit='fontName Arial', style="font-family:'Arial'") Arial
                      li
                        a(href='', data-edit='fontName Sans', style="font-family:'Sans'") Sans
                      li
                        a(href='', data-edit='fontName Serif', style="font-family:'Serif'") Serif
                  .btn-group.dropdown
                    a.btn.btn-default(data-toggle='dropdown', title='Font Size')
                      em.fa.fa-text-height
                      | &nbsp;
                      b.caret
                    ul.dropdown-menu
                      li
                        a(href='', data-edit='fontSize 5', style='font-size:24px') Huge
                      li
                        a(href='', data-edit='fontSize 3', style='font-size:18px') Normal
                      li
                        a(href='', data-edit='fontSize 1', style='font-size:14px') Small
                  .btn-group
                    a.btn.btn-default(data-edit='bold', data-toggle="tooltip", title='Bold (Ctrl/Cmd+B)')
                      em.fa.fa-bold
                    a.btn.btn-default(data-edit='italic', data-toggle="tooltip", title='Italic (Ctrl/Cmd+I)')
                      em.fa.fa-italic
                    a.btn.btn-default(data-edit='strikethrough', data-toggle="tooltip", title='Strikethrough')
                      em.fa.fa-strikethrough
                    a.btn.btn-default(data-edit='underline', data-toggle="tooltip", title='Underline (Ctrl/Cmd+U)')
                      em.fa.fa-underline
                  .btn-group
                    a.btn.btn-default(data-edit='insertunorderedlist', data-toggle="tooltip", title='Bullet list')
                      em.fa.fa-list-ul
                    a.btn.btn-default(data-edit='insertorderedlist', data-toggle="tooltip", title='Number list')
                      em.fa.fa-list-ol
                    a.btn.btn-default(data-edit='outdent', data-toggle="tooltip", title='Reduce indent (Shift+Tab)')
                      em.fa.fa-dedent
                    a.btn.btn-default(data-edit='indent', data-toggle="tooltip", title='Indent (Tab)')
                      em.fa.fa-indent
                  .btn-group
                    a.btn.btn-default(data-edit='justifyleft', data-toggle="tooltip", title='Align Left (Ctrl/Cmd+L)')
                      em.fa.fa-align-left
                    a.btn.btn-default(data-edit='justifycenter', data-toggle="tooltip", title='Center (Ctrl/Cmd+E)')
                      em.fa.fa-align-center
                    a.btn.btn-default(data-edit='justifyright', data-toggle="tooltip", title='Align Right (Ctrl/Cmd+R)')
                      em.fa.fa-align-right
                    a.btn.btn-default(data-edit='justifyfull', data-toggle="tooltip", title='Justify (Ctrl/Cmd+J)')
                      em.fa.fa-align-justify
                  .btn-group.dropdown
                    a.btn.btn-default(data-toggle='dropdown', title='Hyperlink')
                      em.fa.fa-link
                    .dropdown-menu
                      .input-group.ml-xs.mr-xs
                        input#LinkInput.form-control.input-sm(placeholder='URL', type='text', data-edit='createLink')
                        .input-group-btn
                          button.btn.btn-sm.btn-default(type='button') Add
                    a.btn.btn-default(data-edit='unlink', data-toggle="tooltip", title='Remove Hyperlink')
                      em.fa.fa-cut
                  .btn-group
                    a#pictureBtn.btn.btn-default(data-toggle="tooltip", title='Insert picture (or just drag & drop)')
                      em.fa.fa-picture-o
                    input(type='file', data-edit='insertImage', style='position:absolute; opacity:0; width:41px; height:34px')
                  .btn-group.pull-right
                    a.btn.btn-default(data-edit='undo', data-toggle="tooltip", title='Undo (Ctrl/Cmd+Z)')
                      em.fa.fa-undo
                    a.btn.btn-default(data-edit='redo', data-toggle="tooltip", title='Redo (Ctrl/Cmd+Y)')
                      em.fa.fa-repeat
                .form-control.wysiwyg.mt-lg(style='overflow:scroll; height:250px;max-height:250px') Type something ...

          fieldset
            .form-group
              .col-sm-4.col-sm-offset-2
                button.btn.btn-default(type='submit') Cancel
                button.btn.btn-primary(type='submit') Save changes
  // END panel

block vendor_css
  // TAGS INPUT
  link(rel='stylesheet', href='../vendor/bootstrap-tagsinput/dist/bootstrap-tagsinput.css')
  // SLIDER CTRL
  link(rel='stylesheet', href='../vendor/seiyria-bootstrap-slider/dist/css/bootstrap-slider.min.css')
  // CHOSEN
  link(rel='stylesheet', href='../vendor/chosen_v1.2.0/chosen.min.css')
  // DATETIMEPICKER
  link(rel='stylesheet', href='../vendor/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css')
  // COLORPICKER
  link(rel='stylesheet', href='../vendor/mjolnic-bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css')
  // SELECT2
  link(rel='stylesheet', href='../vendor/select2/dist/css/select2.css')
  link(rel='stylesheet', href='../vendor/select2-bootstrap-theme/dist/select2-bootstrap.css')
block vendor_js
  // FILESTYLE
  script(src='../vendor/bootstrap-filestyle/src/bootstrap-filestyle.js')
  // TAGS INPUT
  script(src='../vendor/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js')
  // CHOSEN
  script(src='../vendor/chosen_v1.2.0/chosen.jquery.min.js')
  // SLIDER CTRL
  script(src='../vendor/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js')
  // INPUT MASK
  script(src='../vendor/jquery.inputmask/dist/jquery.inputmask.bundle.js')
  // WYSIWYG
  script(src='../vendor/bootstrap-wysiwyg/bootstrap-wysiwyg.js')
  script(src='../vendor/bootstrap-wysiwyg/external/jquery.hotkeys.js')
  // MOMENT JS
  script(src='../vendor/moment/min/moment-with-locales.min.js')
  // DATETIMEPICKER
  script(type='text/javascript', src='../vendor/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js')
  // COLORPICKER
  script(type='text/javascript', src='../vendor/mjolnic-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js')
  // Demo
  script(src='js/demo/demo-forms.js')
  // SELECT2
  script(src='../vendor/select2/dist/js/select2.js')

